<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="发送者名称" prop="ehpRemindName">
                <el-input
                        v-model="queryParams.ehpRemindName"
                        placeholder="请输入发送者名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
                  <el-form-item label="用户名称" prop="ehpUsername">
                <el-input
                        v-model="queryParams.ehpUsername"
                        placeholder="请输入用户名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
                  </el-form-item>
                  <el-form-item label="状态" prop="ehpType">
         <el-select
          v-model="queryParams.ehpType"
          placeholder="请选择要查询的状态"
          clearable
          size="small"
          @keyup.enter.native="handleQuery">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>               
            </el-form-item>
                  <el-form-item label="主题" prop="ehpTitle">
                <el-input
                        v-model="queryParams.ehpTitle"
                        placeholder="请输入主题"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
                  <el-form-item label="网格名称" prop="ehpGridName">
                <el-input
                        v-model="queryParams.ehpGridName"
                        placeholder="请输入网格名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
                  <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                >修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                >删除</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="ehMessageList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column
                        prop="ehpId"
                        header-align="center"
                        align="center"
                        label="编号">
                </el-table-column>
                            <el-table-column
                        prop="ehpRemindUid"
                        header-align="center"
                        align="center"
                        label="发送者编号">
                </el-table-column>
                            <el-table-column
                        prop="ehpRemindName"
                        header-align="center"
                        align="center"
                        label="发送者名称">
                </el-table-column>
                            <el-table-column
                        prop="ehpUid"
                        header-align="center"
                        align="center"
                        label="用户编号">
                </el-table-column>
                            <el-table-column
                        prop="ehpUsername"
                        header-align="center"
                        align="center"
                        label="用户名称">
                </el-table-column>
                            <el-table-column
                        prop="ehpType"
                        header-align="center"
                        align="center"
                        label="状态">
                       <template scope="scope">
<p v-if="scope.row.ehpType==1">系统通知</p>
<p v-if="scope.row.ehpType==2">积分通知</p>
<p v-if="scope.row.ehpType==3">审核通知</p>
        </template>         
                </el-table-column>
                            <el-table-column
                        prop="isRead"
                        header-align="center"
                        align="center"
                        label="是否已读">
                        <el-switch
  v-model="isRead"
  
  disabled>
</el-switch>
                </el-table-column>
                            <el-table-column
                        prop="ehpTitle"
                        header-align="center"
                        align="center"
                        label="主题">
                </el-table-column>
                            <el-table-column
                        prop="ehpContent"
                        header-align="center"
                        align="center"
                        label="消息内容">
                </el-table-column>
                            <el-table-column
                        prop="ehpGridName"
                        header-align="center"
                        align="center"
                        label="网格名称">
                </el-table-column>
                            <el-table-column
                        prop="ehpGridId"
                        header-align="center"
                        align="center"
                        label="所属网格">
                </el-table-column>
                            <el-table-column
                        prop="ehpCreateTime"
                        header-align="center"
                        align="center"
                        label="创建时间">
                </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                    >修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改岗位对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                              <el-form-item label="编号" prop="ehpId">
                    <el-input v-model="form.ehpId" placeholder="请输入编号" />
                </el-form-item>
                              <el-form-item label="发送者uid编号" prop="ehpRemindUid">
                    <el-input v-model="form.ehpRemindUid" placeholder="请输入发送者uid编号" />
                </el-form-item>
                              <el-form-item label="发送者名称" prop="ehpRemindName">
                    <el-input v-model="form.ehpRemindName" placeholder="请输入发送者名称" />
                </el-form-item>
                              <el-form-item label="用户编号" prop="ehpUid">
                    <el-input v-model="form.ehpUid" placeholder="请输入用户编号" />
                </el-form-item>
                              <el-form-item label="用户名称" prop="ehpUsername">
                    <el-input v-model="form.ehpUsername" placeholder="请输入用户名称" />
                </el-form-item>
                 <el-form-item label="状态 " prop="ehpType">
                             <el-select
          v-model="form.ehpType"
          placeholder="请输入状态"
          clearable
          size="small"
          @keyup.enter.native="handleQuery">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>  
                </el-form-item>
                              <el-form-item label="是否已读：0：true，1：false" prop="isRead">
                    <el-switch
  v-model="form.isRead"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>              
                </el-form-item>
                              <el-form-item label="主题" prop="ehpTitle">
                    <el-input v-model="form.ehpTitle" placeholder="请输入主题" />
                </el-form-item>
                              <el-form-item label="消息内容" prop="ehpContent">
                    <el-input v-model="form.ehpContent" placeholder="请输入消息内容" />
                </el-form-item>
                              <el-form-item label="网格名称" prop="ehpGridName">
                    <el-input v-model="form.ehpGridName" placeholder="请输入网格名称" />
                </el-form-item>
                              <el-form-item label="所属网格" prop="ehpGridId">
                    <el-input v-model="form.ehpGridId" placeholder="请输入所属网格" />
                </el-form-item>
                              <el-form-item label="创建时间" prop="ehpCreateTime">
                    <el-input v-model="form.ehpCreateTime" placeholder="请输入创建时间" />
                </el-form-item>
                          </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { listEhMessage, getEhMessage, delEhMessage, addEhMessage, updateEhMessage } from "@/api/portal/message/ehmessage";
    export default {
        name: "EhMessage",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 岗位表格数据
                 ehMessageList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 状态数据字典
                statusOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    ehpId:undefined,
                    ehpRemindUid:undefined,
                    ehpRemindName:undefined,
                    ehpUid:undefined,
                    ehpUsername:undefined,
                    stateType:undefined,
                    isRead:undefined,
                    ehpTitle:undefined,
                    ehpContent:undefined,
                    ehpGridName:undefined,
                    ehpGridId:undefined,
                    ehpCreateTime:undefined
                },
                // 表单参数
                form: {},
                      //选项
      options: [
        {
          value: 1, 
          label: "系统通知"
        },
        {
          value: 2,
          label: "积分通知"
        },
        {
          value: 3,
          label: "审核通知"
        }
      ],
      
                // 表单校验
                rules: {
                                                ehpId: [
                    { required: true, message: "编号不能为空", trigger: "blur" }
                ],
                                                                ehpRemindUid: [
                    { required: true, message: "发送者uid编号不能为空", trigger: "blur" }
                ],
                                                                ehpRemindName: [
                    { required: true, message: "发送者名称不能为空", trigger: "blur" }
                ],
                                                                ehpUid: [
                    { required: true, message: "用户编号不能为空", trigger: "blur" }
                ],
                                                                ehpUsername: [
                    { required: true, message: "用户名称不能为空", trigger: "blur" }
                ],
                                                                stateType: [
                    { required: true, message: "审核类型：1:议题,2:活动,3:报名,4:志愿者,5:产品,6:企业积分,7:企业审核不能为空", trigger: "blur" }
                ],
                                                                ehpType: [
                    { required: true, message: "状态 1、系统通知，2、积分通知，3、审核通知不能为空", trigger: "blur" }
                ],
                                                                isRead: [
                    { required: true, message: "是否已读：0：true，1：false不能为空", trigger: "blur" }
                ],
                                                                ehpTitle: [
                    { required: true, message: "主题不能为空", trigger: "blur" }
                ],
                                                                ehpContent: [
                    { required: true, message: "消息内容不能为空", trigger: "blur" }
                ],
                                                                ehpGridName: [
                    { required: true, message: "网格名称不能为空", trigger: "blur" }
                ],
                                                                ehpGridId: [
                    { required: true, message: "所属网格不能为空", trigger: "blur" }
                ]
                                            }
            };
        },
        created() {
            this.getList();
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
        });
        },
        methods: {
            /** 查询消息推送列表 */
            getList() {
                this.loading = true;
                listEhMessage(this.queryParams).then(response => {
                this.ehMessageList = response.data.list;
                this.total = response.data.total;
                this.loading = false;
            });
            },
            // 岗位状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
             reset() {
                 this.form = {
                                                                                    ehpRemindUid:undefined,
                                                                                    ehpRemindName:undefined,
                                                                                    ehpUid:undefined,
                                                                                    ehpUsername:undefined,
                                                                                    stateType:undefined,
                                                                                    ehpType:undefined,
                                                                                    isRead:undefined,
                                                                                    ehpTitle:undefined,
                                                                                    ehpContent:undefined,
                                                                                    ehpGridName:undefined,
                                                                                    ehpGridId:undefined,
                                                                                    ehpCreateTime:undefined
                                                       };
                 this.resetForm("form");
             },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.ehpId)
                this.single = selection.length!=1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加消息推送";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const ehpId = row.ehpId || this.ids
                getEhMessage(ehpId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改消息推送";
            });
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate((valid) => {
                if (valid) {
                if (this.form.ehpId != undefined) {
                updateEhMessage(this.form).then(response => {
                if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
                } else {
                this.msgError(response.msg);
                }
                });
                } else {
                addEhMessage(this.form).then(response => {
                if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
                } else {
                this.msgError(response.msg);
                }
                });
                }
                }
                });
            },
            /** 删除按钮操作 */
             handleDelete(row) {
                 const ehpIdList = row.ehpId || this.ids;
                 this.$confirm('是否确认删除消息推送编号为"' + ehpIdList + '"的数据项?', "警告", {
                     confirmButtonText: "确定",
                     cancelButtonText: "取消",
                     type: "warning"
                 }).then(function() {
                     return delEhMessage(ehpIdList);
                 }).then(() => {
                     this.getList();
                 this.msgSuccess("删除成功");
             }).catch(function() {});
             }
        }
    };
</script>
